<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar :viewerSource="viewerSource" style="top:180px" />
    <div class="tool-box-left-top">
      <p><button :class="{active:playing}" @click="playing=!playing">播放</button></p>
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="relativeHeight" :max="10000" /></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="shadows">shadows</a-checkbox></div> -->
      <!-- <div class="select-box-wrapper"><select-box :options="flyOptions" /></div> -->
    </div>
    <div class="tool-box-left-bottom"></div>
    <GlobeRotater showTime :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>


<script>
// https://sandcastle.cesium.com/?src=Camera%20Tutorial.html&label=All
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch, toRaw } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { G3V } from '@g3x';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import {viewerMixin} from '@mixins';

const $g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers: [{
    dom: 'cesium-viewer',
    name: 'viewer1',
    title: 'viewer#01',
    viewer: {
      imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
      imageryProvider: null,
      terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
      terrainProvider: null,
      shadows: false,
      // sceneMode: Cesium.SceneMode.SCENE2D,
      animation: false
    },
    layers: [
      { type: 'tdtIboMap', options: { brightness: 1, show: true } },
      { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
      // { type: 'darkMask', options: { brightness: 1, alpha: 0.9 } },
      {
        type: 'graticule',
        options: {
          brightness: 1,
          show: false
        }
      }
    ],
    globe: {
      depthTestAgainstTerrain: false,
      enableLighting: false //启用以太阳为光源的地球
    },
    bottomContainer: false,
    navigation: {
      // defaultResetView: G3V.defaultViews.global.china.rectangle ,
      defaultResetView: null //flyHome
    },
    shortcutAction: false,
    hideLayers: false
    // },{
    //   dom: "cesium-viewer#2",
    //   name: "viewer2",
    //   title: "viewer 2",
    //   viewer:{
    //     imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
    //     imageryProvider: null,
    //     terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
    //     terrainProvider: null,
    //     shadows: false,
    //   }
  }]
};

export default defineComponent({
  name: 'tours', // 旅行动画
  mixins: [viewerMixin],
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  props: {},
  setup() {
    return {};
  },
  data() {
    return {
      playing: false,
      tour: null,
    };
  },
  computed: {},
  watch: {
    playing(val){
      let vm = this;
      const { viewer } = vm;
      if(val){
        vm.tour.play(viewer);
      }else{
        vm.tour.stop();
      }
    }
  },
  methods: {
    g3vOptionsGet(original) {
      return $g3vOptions;
    },
    onViewerInited() {
      console.log('fly onViewerInited');
    },
    initEffects() {
      let vm = this;
      const { viewer } = vm;

      var options = {
        camera: viewer.scene.camera,
        canvas: viewer.scene.canvas
      };

      vm.tour = null;
      viewer.dataSources.add(Cesium.KmlDataSource.load('//zzgis.com/cdn/3d/SampleData/kml/eiffel-tower-flyto.kml', options)).then(function(dataSource) {
        vm.tour = dataSource.kmlTours[0];
        vm.tour.tourStart.addEventListener(function() {
          console.log('Start tour');
        });
        vm.tour.tourEnd.addEventListener(function(terminated) {
          console.log((terminated ? 'Terminate' : 'End') + ' tour');
        });
        vm.tour.entryStart.addEventListener(function(entry) {
          console.log('Play ' + entry.type + ' (' + entry.duration + ')');
        });
        vm.tour.entryEnd.addEventListener(function(entry, terminated) {
          console.log((terminated ? 'Terminate' : 'End') + ' ' + entry.type);
        });
      });

      // Sandcastle.addToolbarButton('Play', function() {
      //   tour.play(viewer);
      // });

      // Sandcastle.addToolbarButton('Terminate', function() {
      //   tour.stop();
      // });

      // Sandcastle.reset = function() {
      //   viewer.dataSources.removeAll();
      //   viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
      //   viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
      // };
    }
  }
});
</script>

<style lang="less">
.tool-box-left-top {
  display: flex;

  button {
    min-width: 5em;
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;

    transition: all 500ms;

    &:hover {
      opacity: 0.75;
    }

    &.active {
      background-color: rgba(0, 20, 200, 0.75);
    }
  }
}
</style>
